<template>
  <div class="info-label">
    <div class="stationName">
      <img :src="iconImg" />
      <p class="title">{{stationData?.stnm}}</p>
    </div>
    <div class="content">
      <h4 class="time" v-if="stationData?.monitorData.zTm || stationData?.monitorData.ts || stationData?.monitorData.tm">
        <clock-circle-filled style="margin-right: 6px" />
        {{ stationData?.monitorData?.zTm || stationData?.monitorData.ts || dayjs(stationData?.monitorData.tm).format('YYYY-MM-DD HH:mm') }}
      </h4>
      <!-- 闸门 -->
      <ul class="list" v-if="stationData?.sttp == 'DD'">
        <li class="listItem">
          <p class="name">闸内水位：</p>
          <h3 class="value" :class="{isOut: formatIsOut(stationData?.monitorData?.inzOut)}">
            <strong>{{ stationData?.monitorData?.inz || '--' }} m</strong>
            <span v-html="formatIsTrend(stationData?.monitorData?.inzTrend)"></span>
          </h3>
        </li>
        <li class="listItem">
          <p class="name">闸外水位：</p>
          <h3 class="value" :class="{isOut: formatIsOut(stationData?.monitorData?.otzOut)}">
            <strong>{{ stationData?.monitorData?.otz || '--' }} m</strong>
            <span v-html="formatIsTrend(stationData?.monitorData?.otzTrend)"></span>
          </h3>
        </li>
      </ul>
      <!-- 墒情 -->
      <ul class="list" v-if="stationData?.sttp == 'SS'">
        <li class="listItem">
          <p class="name">10公分含水率：</p>
          <h3 class="value" :class="{isOut: formatIsOut(stationData?.monitorData?.h10Out)}">
            <strong>{{ stationData?.monitorData?.h10 || '--' }}</strong>
            <span v-html="formatIsTrend(stationData?.monitorData?.h10Trend)"></span>
          </h3>
        </li>
        <li class="listItem">
          <p class="name">20公分含水率：</p>
          <h3 class="value" :class="{isOut: formatIsOut(stationData?.monitorData?.h20Out)}">
            <strong>{{ stationData?.monitorData?.h20 || '--' }}</strong>
            <span v-html="formatIsTrend(stationData?.monitorData?.h20Trend)"></span>
          </h3>
        </li>
        <li class="listItem">
          <p class="name">40公分含水率：</p>
          <h3 class="value" :class="{isOut: formatIsOut(stationData?.monitorData?.h40Out)}">
            <strong>{{ stationData?.monitorData?.h40 || '--' }}</strong>
            <span v-html="formatIsTrend(stationData?.monitorData?.h40Trend)"></span>
          </h3>
        </li>
      </ul>
      <!-- 河道水文站 -->
      <ul class="list" v-if="stationData?.sttp == 'ZZ'">
        <li class="listItem">
          <p class="name">流量：</p>
          <h3 class="value" :class="{isOut: formatIsOut(stationData?.monitorData?.qOut)}">
            <strong>{{ stationData?.monitorData?.q || '--' }} m³/s</strong>
            <span v-html="formatIsTrend(stationData?.monitorData?.qTrend)"></span>
          </h3>
        </li>
        <li class="listItem">
          <p class="name">水位：</p>
          <h3 class="value" :class="{isOut: formatIsOut(stationData?.monitorData?.zOut)}">
            <strong>{{ stationData?.monitorData?.z || '--' }} m</strong>
            <span v-html="formatIsTrend(stationData?.monitorData?.zTrend)"></span>
          </h3>
        </li>
      </ul>
      <!-- 渠道站 -->
      <ul class="list" v-if="stationData?.sttp == 'CZ'">
        <li class="listItem">
          <p class="name">水位：</p>
          <h3 class="value" :class="{isOut: formatIsOut(stationData?.monitorData?.zOut)}">
            <strong>{{ stationData?.monitorData?.z || '--' }} m</strong>
            <span v-html="formatIsTrend(stationData?.monitorData?.wptn)"></span>
          </h3>
        </li>
        <li class="listItem">
          <p class="name">流量：</p>
          <h3 class="value" :class="{isOut: formatIsOut(stationData?.monitorData?.qOut)}">
            <strong>{{ stationData?.monitorData?.q || '--' }} m³/s</strong>
            <span v-html="formatIsTrend(stationData?.monitorData?.qwptn)"></span>
          </h3>
        </li>
      </ul>
      <!-- 湖泊、水库、泵站 -->
      <ul class="list" v-if="stationData?.sttp == 'LK' || stationData?.sttp == 'RR' || stationData?.sttp == 'DP'">
        <li class="listItem">
          <p class="name">水位：</p>
          <h3 class="value" :class="{isOut: formatIsOut(stationData?.monitorData?.zOut)}">
            <strong>{{ stationData?.monitorData?.z || '--' }} m</strong>
            <span v-html="formatIsTrend(stationData?.monitorData?.zwptn)"></span>
          </h3>
        </li>
        <li class="listItem">
          <p class="name">流量：</p>
          <h3 class="value" :class="{isOut: formatIsOut(stationData?.monitorData?.qOut)}">
            <strong>{{ stationData?.monitorData?.q || '--' }} m³/s</strong>
            <span v-html="formatIsTrend(stationData?.monitorData?.qTrend)"></span>
          </h3>
        </li>
      </ul>
      <!-- 雨量站 -->
      <ul class="list" v-if="stationData?.sttp == 'PP'">
        <li class="listItem">
          <p class="name">实时降雨量：</p>
          <h3 class="value" :class="{isOut: formatIsOut(stationData?.monitorData?.pOut)}">
            <strong>{{ stationData?.monitorData?.p || '--' }} mm</strong>
            <span v-html="formatIsTrend(stationData?.monitorData?.pTrend)"></span>
          </h3>
        </li>
        <li class="listItem">
          <p class="name">日降雨量：</p>
          <h3 class="value" :class="{isOut: formatIsOut(stationData?.monitorData?.dypOut)}">
            <strong>{{ stationData?.monitorData?.dyp || '--' }} mm</strong>
            <span v-html="formatIsTrend(stationData?.monitorData?.dypTrend)"></span>
          </h3>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import dayjs from 'dayjs';
  import { ClockCircleFilled } from '@ant-design/icons-vue';
  import { ZZIcon, CZIcon, PPIcon, SSIcon, DPIcon, DDIcon, VVIcon, CCIcon } from '@/setting/imageEnum';

  const iconImg = ref('');
  const props = defineProps({
    stationData: { type: Object },
  });

  const iconData = [
    { icon: ZZIcon, name: '水位站', type: 'ZZ' },
    { icon: CZIcon, name: '流量站', type: 'CZ' },
    { icon: PPIcon, name: '雨量站', type: 'PP' },
    { icon: SSIcon, name: '墒情站', type: 'SS' },
    { icon: DPIcon, name: '泵站', type: 'DP' },
    { icon: DDIcon, name: '闸站', type: 'DD' },
    { icon: VVIcon, name: '视频站', type: 'VV' },
    { icon: CCIcon, name: '图像站', type: 'CC' },
  ]

  for (let i = 0; i < iconData.length; i++) {
    if (iconData[i].type === props.stationData?.sttp) {
      iconImg.value = iconData[i].icon;
    }
  }

  const formatIsTrend = (data) => {
    if (!data) { return '' }
    let showText = ''
    let classStyle = ''
    if (Number(data) === 2) {
      showText = '↓'
      classStyle = 'greenText'
    } else if (Number(data) === 1) {
      showText = '↑'
      classStyle = 'redText'
    } else {
      showText = 'ㅡ'
      classStyle = 'blueText'
    }
    return `<span class=${classStyle}>${showText}</span>`
  }

  const formatIsOut = (data) => {
    let isOut = false
    if (data && Number(data) === 0) { isOut = true }
    return isOut;
  }
</script>
<style lang="less" rel="stylesheet/less" scoped>
  .info-label {
    min-width: 180px;
    border: 1px solid rgba(0, 230, 50, 0.6);
    .stationName {
      height: 28px;
      background: rgba(20, 110, 110, 0.3);
      backdrop-filter: blur(4px);
      transform: translateZ(0);
      padding: 0 8px;
      display: flex;
      align-items: center;
      img {
        width: 18px;
        height: 18px;
        margin-right: 6px;
      }
      p.title {
        font-size: 14px;
        color: #fff;
      }
    }
    .content {
      background: linear-gradient(0deg, rgba(55, 171, 205, 0.4) 0%, rgba(70, 200, 240, 0.24) 100%);
      backdrop-filter: blur(4px);
      transform: translateZ(0);
      padding: 5px;
      h4.time {
        display: flex;
        align-items: center;
        height: 20px;
        padding: 0px 6px;
        font-size: 14px;
        background: rgba(50, 50, 50, 0.4);
        color: #cef6ff;
      }
      ul.list {
        li {
          height: 20px;
          display: flex;
          align-items: center;
          background: rgba(50, 50, 50, 0.4);
          padding: 0px 6px;
          margin-top: 5px;
          font-size: 12px;
          position: relative;
          &::before {
            content: '';
            width: 4px;
            height: 4px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            margin-right: 6px;
          }
          p.name {
            color: #cef6ff;
          }
          h3.value {
            color: #03f0fb;
            span {
              margin-left: 6px;
            }
          }
          ::v-deep(.greenText) {
            color: green !important;
            -webkit-text-stroke: 1px green;
            text-stroke: 1px green;
          }
          ::v-deep(.redText) {
            color: red !important;
            -webkit-text-stroke: 1px red;
            text-stroke: 1px red;
          }
          ::v-deep(.blueText) {
            display: inline-block;
            color: #0070ff !important;
            -webkit-text-stroke: 1px #0070ff;
            text-stroke: 1px #0070ff;
          }
        }
      }
    }

  }
  .isOut {
    color: red !important;
    strong {
      color: red !important;
    }
  }
</style>
